<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>导航排序</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
</head>
<body class="pear-container">

<div class="layui-card">
    <div class="layui-card-body">
        <ul id="sort" class="ztree"></ul>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" onclick="layui.jquery.fn.zTree.getZTreeObj('sort').expandAll(false)">
                折叠
            </button>
            <button type="button" class="pear-btn pear-btn-sm" onclick="layui.jquery.fn.zTree.getZTreeObj('sort').expandAll(true)">
                展开
            </button>
        </div>
    </div>
</div>

<script src="../../../config/apiUrl.js"></script>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script>
    layui.use(['jquery', 'common', 'http', 'toast','ztree'], function () {
        let $ = layui.jquery;
        let common = layui.common;
        var http = layui.http;
        var toast = layui.toast;
        initTree();

        async function initTree(){
            var setting = {
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pid",
                        rootPId: 0
                    },
                    key: {
                        name: "nav_name"
                    }
                },
                edit: {
                    enable: true,
                    drag: {
                        isCopy: false,
                        isMove: true
                    },
                    showRemoveBtn: false,
                    showRenameBtn: false
                },
                check: {
                    enable: true,
                    chkStyle: "checkbox",
                    chkboxType: {"Y": "s", "N": "s"}
                },
                view: {
                    selectedMulti: false
                },
                callback:{
                    onDrop:async function (
                        event, treeId, treeNodes, targetNode, moveType
                    ){
                        var zTree = $.fn.zTree.getZTreeObj(treeId);
                        var paramData = [];
                        var nodeData = [];
                        //子节点拖拽到跟节点 和 根节点的相互排序
                        if (targetNode == null || treeNodes[0].level == 0) {
                            nodeData = zTree.getNodesByParam("level", 0);
                        } else {
                            // 拖拽自己成为子节点
                            var node = zTree.getNodeByTId(treeNodes[0].parentTId);
                            if (node.isParent) {
                                nodeData = zTree.transformToArray(node.children);
                            }
                        }
                        $.each(nodeData, function (i, item) {
                            var dept = {};
                            dept["id"] = item.id;
                            dept["pid"] = item.pid;
                            dept["order_index"] = item.getIndex();//核心：当前节点同级的下标位
                            paramData.push(dept);
                        });
                        //得到这次操作需要变更的数据范围
                        console.log(paramData);
                        let res_data = await common.ajax({
                            url:apiUrlConfig.nav.saveOrder,
                            data:JSON.stringify(paramData)
                        })
                        toast.success({title: false, message: '保存成功'})
                    }
                }
            };
            var treeData = await common.ajax({
                url:apiUrlConfig.nav.List,
                type:"post"
            });
            var zTreeObj = $.fn.zTree.init($("#sort"), setting,treeData.data);
            zTreeObj.expandAll(true);
        }
    })
</script>
</body>
</html>
